<template>
	<view class="page_box">
		<u-navbar :is-back="false" title=" " v-if="0" :border-bottom="false"></u-navbar>
		<view class="content_box u-skeleton">
			<view class="purse-title flex">
				<view 
					 class="title-item"
					 v-for="(item,index) in title_list" 
					 :key="index"
					 @click="purseTitle(index)"
					 >
					<view :class="title_index==index?'title title-after u-skeleton-fillet':'title u-skeleton-fillet'">{{item}}</view>
				</view>
			</view>
			<block v-if="title_index == 0">
				<view class="search-content">
					<u-search
						placeholder="搜索关键词...." 
						v-model="search_model"
						:show-action="false"
						 height="68"
						 bg-color="#f4f4f4"
						 color="#333333"
						 placeholder-color="#A0A0A0"
						 search-icon-color="#A0A0A0"
						 :clearabled="false"
						 @search="searchBind"
						 class="u-skeleton-fillet"
					>
					</u-search>
				</view>
				<view class="discover-item">
					<navigator url="../decoration_hall/designer" hover-class="none" class="content-item flex align-center margin-top">
						<u-avatar size="100" mode="circle" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="u-skeleton-circle"></u-avatar>
						<view class="flex flex-direction margin-left-sm">
							<text class="u-skeleton-fillet">玛卡巴卡</text>
							<text class="f24 margin-top-xs u-skeleton-fillet" style="color: #717171;">设计费：100m²起|103个作品</text>
						</view>
					</navigator>
					<swiper
						class="swiper-content" 
						scroll-x 
						style="height: 316rpx;"
						display-multiple-items='1'
						next-margin="150"
						>
						<swiper-item class="swiper-item" v-for="(item, index) in decoration_list" :key="index" @click="swiperItem">
							<view class="case-img u-skeleton-fillet">
								<image :src="item.img" mode="aspectFill" class="img"></image>
							</view>
							<view class="flex justify-between margin-top-sm">
								<text class="hidden u-skeleton-fillet">{{item.title}}</text>
							</view>
							<view class="flex align-center margin-top-sm">
								<view class="tipc-btn hidden u-skeleton-fillet">{{item.lbl}}</view>
								<view class="f24 hidden u-skeleton-fillet">{{item.tips}}</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="content-item">
						<u-gap height="2" bg-color="#F2F2F2" ></u-gap>
					</view>
				</view>
				<view class="discover-item">
					<navigator url="../decoration_hall/designer" hover-class="none" class="content-item flex align-center margin-top">
						<u-avatar size="100" mode="circle" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="u-skeleton-circle"></u-avatar>
						<view class="flex flex-direction margin-left-sm">
							<text>玛卡巴卡</text>
							<text class="f24 margin-top-xs" style="color: #717171;">设计费：100m²起|103个作品</text>
						</view>
					</navigator>
					<swiper 
						class="swiper-content" 
						scroll-x 
						style="height: 316rpx;"
						display-multiple-items='1'
						next-margin="150"
						>
						<swiper-item class="swiper-item" v-for="(item, index) in decoration_list" :key="index">
							<view class="case-img u-skeleton-fillet">
								<image :src="item.img" mode="aspectFill" class="img"></image>
							</view>
							<view class="flex justify-between margin-top-sm">
								<text class="hidden u-skeleton-fillet">{{item.title}}</text>
							</view>
							<view class="flex align-center margin-top-sm">
								<view class="tipc-btn hidden u-skeleton-fillet">{{item.lbl}}</view>
								<view class="f24 hidden u-skeleton-fillet">{{item.tips}}</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</block>
			<block v-else>
				<view class="smCityConsumption">
					<image class="margin-top" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bj_tcxf.png" style="width: 100%;height: 528rpx;"></image>
					<view class="consumption-list">
						<view class="list-item flex justify-between align-center">
							<view class="flex align-center">
								<u-avatar size="84" mode="circle" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png"></u-avatar>
								<view class="margin-left-sm">
									<view><text class="f26 u-skeleton-fillet">玛卡巴卡</text></view>
									<view class="margin-top-xs"><text class="f22 u-skeleton-fillet" style="color: #717171;">2020.03.23</text></view>
								</view>
							</view>
							<view class="text-price">120005</view>
						</view>
						<view class="list-item flex justify-between align-center">
							<view class="flex align-center">
								<u-avatar size="84" mode="circle" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png"></u-avatar>
								<view class="margin-left-sm">
									<view><text class="f26">玛卡巴卡</text></view>
									<view class="margin-top-xs"><text class="f22" style="color: #717171;">2020.03.23</text></view>
								</view>
							</view>
							<view class="text-price">120005</view>
						</view>
						<view class="list-item flex justify-between align-center">
							<view class="flex align-center">
								<u-avatar size="84" mode="circle" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png"></u-avatar>
								<view class="margin-left-sm">
									<view><text class="f26">玛卡巴卡</text></view>
									<view class="margin-top-xs"><text class="f22" style="color: #717171;">2020.03.23</text></view>
								</view>
							</view>
							<view class="text-price">120005</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		
		<!--骨架组件-->
		<u-skeleton :loading="loading" :animation="true" border-radius="30" bgColor="#FFF"></u-skeleton>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading:true,
			title_index:0,
			title_list:["案例","同城消费"],
			decoration_list: [{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/case.png',
					title: '现代简约低奢风小户型',
					lbl:"日式",
					tips: '3室·260m²|成都|6万',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
				},{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/case.png',
					title: '现代简约低奢风小户型',
					lbl:"日式",
					tips: '3室·260m²|成都|6万',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
				},{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/case.png',
					title: '现代简约低奢风小户型',
					lbl:"日式",
					tips: '3室·260m²|成都|6万',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
				}
			],
		};
	},
	onLoad(){
		// 通过延时模拟向后端请求数据，调隐藏骨架屏
		setTimeout(() => {
			this.loading = false;
		}, 2000)
	},
	onShow() {},
	methods: {
		purseTitle(index){
			//console.log("index: ",index);
			this.title_index = index;
		},
		searchBind(e){
			console.log(e)
		},
		swiperItem(){
			uni.navigateTo({
				url:'../decoration_hall/case_details'
			})
		},
		
	}
};
</script>

<style lang="scss" scoped>
.page_box {

}
.purse-title{
	margin-top: 110rpx;
	.title-item{
		display: flex;
		justify-content: center;	
		padding: 0 50rpx;
		.title{
			font-weight: 500;
			color: #717171;
			font-family: PingFang SC, PingFang SC-Bold;
		}
		.title-after{
			position: relative;
			color: #232323;		
			z-index: 1;
			font-size: 30rpx;
			font-weight: 700;
			&::before{
				content: '';
				width: 114%;
				height: 8rpx;
				background: #ffcc00;
				position: absolute;
				left: -6rpx;
				bottom: 14rpx;
				z-index: -1;
			}
		}
	}		
}
.content_box {
	.search-content{
		margin-top: 50rpx;
		padding: 0 22rpx;
		/deep/.u-input{
			font-size: 24rpx !important;
		}
	}
	padding-bottom: 50rpx;
	.discover-item{
		.swiper-content{
			padding-left: 22rpx;
			.swiper-item{				
				padding-right: 22rpx !important;
				.case-img{
					border-radius: 10rpx;
					width: 100%;
					height: 200rpx;
					overflow: hidden;
					.img{
						width: 100%;
						height: 100%;
					}
				}
				.tipc-btn{
					background: #ffb81e;
					border-radius: 6px;
					padding: 5rpx 18rpx;
					color: white;
					font-size: 22rpx;
					margin-right: 10rpx;
				}
			}			
		}
	}	
	.consumption-list{
		background: #ffffff;
		border-radius: 20rpx;
		margin: -180rpx 22rpx 50rpx;
		z-index: 2;
		position: relative;
		padding: 20rpx;
		.list-item{
			padding: 20rpx 0;
			border-bottom: 1rpx solid #F8F8F8;
			&:last-child{
				border-bottom: none;
			}
		}
	}
}
</style>
